<template lang="html">
  <div class="content">
    <el-row>
      <el-form ref="form" :model="form" label-width="80px" >
        <el-form-item label="用户名">
          <el-input v-model="form.username" placeholder="用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input type="password" v-model="form.password" placeholder="密码"></el-input>
        </el-form-item>
        <el-form-item label="用户类型">
          <el-select v-model="form.roleId" placeholder="请选择">
            <el-option
              v-for="(item, index) in roleList"
              :key="index"
              :label="item.name"
              :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit">新建</el-button>
          <el-button @click="reset">取消</el-button>
        </el-form-item>
      </el-form>
    </el-row>
  </div>
</template>

<script>
export default {
  data () {
    return {
      form: {
        username: '',
        password: '',
        roleId: ''
      },
      roleList: []
    }
  },
  methods: {
    init () {
      this.getRoleList()
    },
    getRoleList () {
      this.$http.get('/role')
        .then(res => {
          const data = res.data || []
          let roleList = []
          roleList = data.map(item => {
            return {
              value: item.role_id,
              name: item.role_name
            }
          });
          this.roleList = roleList.slice(0)
        })
    },
    reset () {
      this.form = {
        username: '',
        password: '',
        roleId: ''
      }
    },
    submit () {
      const { username, password, roleId } = this.form
      this.$http.post('/user', {
        username,
        password,
        roleId
      })
        .then(res => {})
    }
  },
  created () {
    this.init()
  }
}
</script>

<style lang="css">
</style>
